
<template>
  <div class="app-container">
      <search-header
        v-show="boo.showSearch"
        :select-prop="selectProp"
        @search-action="searchAction"
      ></search-header>

      <div class="app-permission-container flex-between mb8">
        <span class="page-list-title">订单列表</span>
        <div class="action-content">
          <el-button :disabled="boo.multiple" type="primary" size="mini" @click="batchVerification"
          >批量核销</el-button>
          <el-button type="primary" v-hasPermi="['admin:acddOrder:export']" size="mini" @click="exportOrder"
          >导出</el-button>
        </div>
      </div>
      <div class="app-table-container">
        <el-table
          v-loading="boo.loading"
          :data="list" border
          @selection-change="handleSelectionChange"
        >
          <el-table-column 
          :selectable="selectEnable"
          type="selection" width="50" align="center" />
          <el-table-column
            label="活动编号"
            align="center"
            key="activityCode"
            prop="activityCode"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="活动类型"
            align="center"
            key="activityType"
            prop="activityType"
            :show-overflow-tooltip="true" /> 
          <el-table-column
            label="服务类型"
            align="center"
            key="serveType"
            prop="serveType"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="服务信息"
            align="center"
            key="serveMessage"
            prop="serveMessage"
          />
          <el-table-column
            label="市场价(元)"
            align="center"
            key="price"
            prop="price"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="订单价格(元)"
            align="center"
            key="orderPrice"
            prop="orderPrice"
          />
          
          <el-table-column
            label="姓名"
            align="center"
            key="name"
            prop="name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="车牌号/车架号"
            align="center"
            key="clientPlateNumber"
            prop="clientPlateNumber"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="手机号"
            align="center"
            key="phone"
            prop="phone"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="备注"
            align="center"
            key="commentContent"
            prop="commentContent"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="商家/核销单位"
            align="center"
            key="shopMessage"
            prop="shopMessage"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="下单时间/核销时间"
            align="center"
            key="timeMessage"
            prop="timeMessage"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="状态"
            align="center"
            key="orderStatus"
            prop="orderStatus"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{row}">
              <el-button
                v-if="row.orderStatusNumber == 4"
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="deleteRow(row)"
                >废除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="other.total > 0"
          :total="other.total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
  </div>
</template>

<script>
import {
  getOrderList, exportOrder,
  orderCancellation,
  batchVerification
} from "@/api/orderManage/index";
export default {
  name: "List",
  components: {
    "search-header": () => import("@/rhComponents/searchHeader/index"),
  },
  filters: {
    numToStr(num, list, type){
      let index = list.findIndex(item => item.name == type)
      if(index == -1) return '未定义参数'
      let idx = list[index].child.findIndex(i => i.dictCode == num)
      if(idx == -1) return '未定义状态'
      return list[index].child[idx].dictLabel
    }
  },
  data() {
    return {
      selectProp: JSON.parse(JSON.stringify(this.$getSearchHeader(this))),
      boo: {
        loading: true, // 遮罩层
        multiple: true, // 非多个禁用
        showSearch: true, // 显示搜索条件
      },
      other: {
        ids: [], // 选中数组
        total: 0, //总条数
      },        
      dictsList: [], //字典列表
      // 地块列表
      list: [],
      selectedList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  mounted(){
    let _self = this
    _self.initGetDicts().then(res => {
      _self.getList()
    })
  },
  methods: {
     // 升级成功，不能勾选
     selectEnable(row, rowIndex) {
      if (row.orderStatusNumber != 4) return false;
      return true;
    },
    // 搜索条件查询
    searchAction(prop) {
      this.queryParams = Object.assign(this.queryParams, prop["params"]);
      this.queryParams.pageNum = 1;
      this.getList();
    },
    exportOrder(){
      let _self = this
      exportOrder(_self.queryParams, '订单列表')
    },
    /** 删除按钮操作 */
    deleteRow(row) {
      let id = row.id
      this.$modal
        .confirm('是否确认废除？')
        .then(function () {
          return orderCancellation(id);
        })
        .then(() => {
          this.queryParams.pageNum = 1
          this.getList();
          this.$modal.msgSuccess("废除成功");
        })
        .catch(() => {});
    },
    /** 查询用户列表 */
    getList() {
      this.boo.loading = true;
      getOrderList(this.queryParams)
        .then((response) => {
          this.list = response.rows;
          this.other.total = response.total;
          this.boo.loading = false;
        })
        .catch(() => {});
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.other.ids = selection.map((item) => item.id);
      this.boo.multiple = !selection.length;
      console.log(this.other.ids)
    },
    batchVerification(){
      let ids = this.other.ids || []
      this.$modal
        .confirm('是否确认批量核销选中订单？')
        .then(function () {
          return batchVerification({ids: ids});
        })
        .then(() => {
          this.queryParams.pageNum = 1
          this.getList();
          this.$modal.msgSuccess("核销成功");
        })
        .catch(() => {});
    },
  }
};
</script>
<style scoped lang="scss">
</style>